<template>
  <el-dialog v-model="visible" :title="title" width="860px" draggable align-center>
    <el-row>
      <el-col :span="8" v-for="(item, index) in cardDataList" :key="index">
        <el-card>
          <div :style="{ height: dynamicHeight + 'px' }">
            <el-row>
              <div :style="{ backgroundColor: item.phoneCodeColor }">
                <span style="font-size: 22px">
                  {{item.phoneCode}}
                </span>
              </div>
            </el-row>
            <el-row>
              <div style="font-size: 20px">
                <span :style="{backgroundColor: item.phoneNoColor}">
                  {{item.phoneNo}} 数量:{{ item.nameList.length}}
                </span>
              </div>
            </el-row>
            <el-row>
                <el-col :span="8" v-for="(item, index) in item.nameList" :key="index" >
                <span style="font-size: 20px">
                  {{item}}
                </span>
                </el-col>
            </el-row>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script setup lang="ts">

import request from "@/config/axios";

const visible = ref(false);
const title = ref('手机卡贴');
const cardDataList = ref([])
const dynamicHeight = ref(400)

const fetchData = function (type, row) {
  title.value = type
  request.get({
    url: '/transferPhone/getPhoneCardList',
    params: row
  }).then(res => {
    cardDataList.value = res
  })
}

defineExpose({
  open: (title, row) => {
    if (!title){
      dynamicHeight.value = 700
    }else{
      dynamicHeight.value = 400
    }
    visible.value = true
    cardDataList.value = []
    fetchData(title, row)
  }
})

</script>

<style scoped>

</style>
